import React, { useEffect, useState } from 'react';
import { LoadingOutlined, PlusOutlined ,UploadOutlined } from '@ant-design/icons';
import { Flex, message, Upload, Card, Col, Row  ,Tag  } from 'antd';
 
const props = {
    action: 'http://120.55.76.143:48080/admin-api/system/user/profile/update-avatar',
    listType: 'picture-circle',
    name:"avatarFile",
    headers: {
        'Authorization':'Bearer '+ localStorage.getItem('token'),
        'tenant-id': '1'
    },
    beforeUpload(file) {
        return new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            const img = document.createElement('img');
            img.src = reader.result;
            img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            ctx.fillStyle = '#fff';
            ctx.textBaseline = 'middle';
            ctx.font = '23px Arial';
            ctx.fillText('版权归属woods', 20, 20);
            canvas.toBlob((result) => resolve(result));
            };
        };
        });
    },
};
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
const UserInfo = (userData) => {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState('');
  const [user, setUser] = useState(userData?.data);
    useEffect(() => {
       setImageUrl(userData.data.avatar) 
       setUser(userData.data) 
    }, [userData])
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      
    }
  };
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  );
  return (
    <div style={{ paddingRight: '40px' }}>
        <Flex gap="middle" wrap>
        
        <Upload
            name="avatarFile"
            listType="picture-circle"
            className="avatar-uploader"
            showUploadList={false}
            action="http://120.55.76.143:48080/admin-api/system/user/profile/update-avatar"
            beforeUpload={beforeUpload}
            onChange={handleChange}
            headers={{
            'Authorization':'Bearer '+ localStorage.getItem('token'),
            'tenant-id': '1'
            }}
        >
            {imageUrl ? (
            <img  src={imageUrl} alt="avatar" style={{ width: '100%', borderRadius: '50%' }} />
            ) : ( uploadButton )}
        </Upload>

        {/* <Upload {...props}>
            {imageUrl ? (
            <img  src={imageUrl} alt="avatar" style={{ width: '100%', }} />
            ) : ( uploadButton )}
            </Upload> */}
        </Flex>
        <Row gutter={24}>
          <Col span={12}  style={{marginTop:'20px'}}>
            <Card title="姓名" bordered={false}>
              {user.nickname}
            </Card>
          </Col>
          <Col span={12}  style={{marginTop:'20px'}}>
            <Card title="手机号" bordered={false}>
              {user.mobile}
            </Card>
          </Col>
          <Col span={12}  style={{marginTop:'20px'}}>
            <Card title="登录IP" bordered={false}>
            {user.loginIp}
            </Card>
          </Col>
 
          <Col span={12}  style={{marginTop:'20px'}} >
            <Card title="角色" bordered={false}>
              {user.roles && user.roles.length && user.roles.map((item,index)=>{
                return <Tag key={index}>{item.name}</Tag>
              })}
            </Card>
          </Col>
        </Row>    
    </div>
  );
};
export default UserInfo;